<template>
  <!--左边-->

  <div class="hotWrapper minWidth f">
    <div class="hotListWrapper f">
      <ul>
        <li >
          <!--热度关键词刷新组件-->
          <homeRefresh :titleRefresh="refreshKey"></homeRefresh>
        </li>
        <li>
          <!--热度关键词列表组件-->
          <homeHotKeyword :keywordList="getHomeData.keyShowList" ></homeHotKeyword>
        </li>
      </ul>
    </div>
    <!--中间-->
    <div class="hotListWrapper hotLoadWrapper f">
      <ul>
        <li >
          <homeRefresh :titleRefresh="refreshDownLoad"></homeRefresh>
        </li>
        <li v-for="(item,index) in getHomeData.downShowList" v-if="index<6">
          <div class="flex1 contentLi contentLoad f" >
            <span class="relt "><img src="../../assets/Home/redu2019627.png" alt="" v-if="index<=2"> <span :class="index<=2?'colorWhite':''" v-text="index+1" class="colorRed">1</span></span>
            <div class="loadRight">
              <div v-text="item.Title" @click.stop="do_goSubjectDetail(item.SN)"> </div>
              <div class="overflow3 finishManWrap">完成人员： <span class="finishMan"  v-for="(item2,index2) in item.Author.split(',')" :key="index2" v-text="item2"></span> </div>
              <div class="downLoad"><span class="iconfont icon-xiazai"></span><span v-text="item.DownLoadNumber"></span></div>

            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--右边-->
    <div class="hotListWrapper f">
      <ul>
        <li >
          <homeRefresh :titleRefresh="refreshNews"></homeRefresh>
        </li>
        <!--浏览记录组件-->
        <li >
          <homeEyes  ></homeEyes>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
  import homeRefresh from '../common/cm_home-refresh'//热门刷新小组件
  import homeEyes from '../common/cm_home-eyes'//浏览记录
  import homeHotKeyword from '../common/cm_home-hotKeyword'//热度关键词
    export default {
      name: "hotspotList",
      props:{
        AllData:Object
      },
      components: {
        homeRefresh,
        homeEyes,
        homeHotKeyword
      },

      data() {
        return {
          /*刷新小组件数据*/
          refreshKey: {
            name: "热门关键词",
            nameSrc: this.$ZcPublic.Domain + "static/img/common/renmen2019627.png",
            doText: "刷新",
            textSrc: this.$ZcPublic.Domain + "static/img/common/huan2019627.png",
          },
          refreshDownLoad: {
            name: "热门下载",
            nameSrc: this.$ZcPublic.Domain + "static/img/common/renmen2019627.png",
            doText: "刷新",
            textSrc: this.$ZcPublic.Domain + "static/img/common/huan2019627.png",
          },
          refreshNews: {
            name: "最新评价",
            nameSrc: this.$ZcPublic.Domain + "static/img/common/renmen2019627.png",
            doText: "刷新",
            textSrc: this.$ZcPublic.Domain + "static/img/common/huan2019627.png",
          },


        }
      },
      created(){

      },
methods:{
  do_goSubjectDetail(item){
    this.$router.push({name:"yw_subjectDetail",query:{SN:item}})
    // this.$router.push('yw_subjectDetail')
  }
},
      computed:{
        getHomeData(){ //获取首页内容展示数据
          return this.$store.getters.getHomeData;
        },
      }

    }
</script>

<style scoped>
  /**/
  .hotWrapper{
    margin-top: 20px;
  }
  .hotListWrapper{
    width: 385px;
    box-shadow: 1px 1px 1px 1px #f3f3f3;
    box-sizing: border-box;
    background-color: white;
    margin-right: 22px;
  }
  .hotListWrapper:last-child{
    margin-right: 0;
  }
  .hotListWrapper ul{
    width: 100%;
  }
  .hotListWrapper ul li{
    padding:0 10px 0 10px;
  }
  .hotListWrapper ul li:nth-of-type(2){
    padding-top:10px !important;
  }
  .hotListWrapper ul li:first-child{
    border-bottom: 1px solid gainsboro;
  }
  .hotListWrapper ul li>.contentLi{
    border-bottom: 1px dashed grey;
    padding-bottom: 10px;
    box-sizing: content-box;
    padding-top: 10px;
  }

  .rightTitle{
    padding-left: 10px;
  }
  .contentLi .relt {
    height: 26px !important;
    width: 22px !important;
  }
  .contentLi .relt img{
    width: 22px;
    position: absolute;top: 0;
  }
  .contentLi div:last-child{
    color: #808080;
  }
  .contentLi .relt span{
    position: absolute;
    left: 7px;
    top: 2px;
    height: 20px;
    line-height: 20px;
    color: white;
    font-weight: 600;
  }
  .contentLi span:last-child{


  }
  .loadRight{
    width: 100%;
    margin-top: -5px;

  }
  .loadRight div{
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .loadRight div:first-child{
    color: black;
    font-size: 16px;
    height: 25px;
    line-height: 23px;
  }
  .contentLoad{
    padding-bottom: 5px !important;
  }
.downLoad{
  font-size: 12px !important;
  cursor: pointer;
}
  .downLoad>span{

    margin-right: 10px;
  }
  .colorRed{
    color: red !important;
  }
  .colorWhite{
    color: white !important;
  }
  .finishMan{
    margin-right: 5px;
  }
  .finishManWrap{

    width: 344px;
  }
</style>
